import { inject, nextTick, onMounted, ref, watch } from "vue";
import { getCurrentInstance } from "vue"
import { goToPage } from '../../../utils/utils';
import { objectAny } from "../../../options/base";
import { storeToRefs } from "pinia";
import { myRiderUserStore } from "../../store";

export default {
    name:`rider-action-bar-component`,
    props:{
        isReset:{
            default:false,
            type:Boolean
        },
        serverData:{
            default:function(){
                return {}
            },
            type:Object
        },
        dragBtnStyle:{
            default:function(){
                return {
                    customClass:``,
                    btnText:``,
                    action:(serverData:objectAny)=>{},
                }
            },
            type:Object
        },
    },
    setup(props:any) {
        console.log(`-----rider-action-bar-----`)

        const riderUserStore=myRiderUserStore();
        // 用户基本信息
        const { myUserInfo } = storeToRefs(riderUserStore);

        const  openPopup= inject(`openPopup`)
        const that = getCurrentInstance()

        let touchEl:any = null;
        // 按钮是否滑动完成
        let touchSlideOver:boolean = false; 
        // 操作按钮剩余宽度
        const operateWidth = ref(0); 

        /** 处理手指触摸后移动 */
        function handleTouchmove(event:any) {
            if(touchEl==null){
                return false;
            }
            const { pageX, pageY } = event.touches[0];
            let reduce=pageX-touchEl.startX;
            if(reduce<0){
                reduce=0;
            }else if(reduce>=touchEl.xy.width){
                reduce=touchEl.xy.width
                touchSlideOver=true;
            }else{
                touchSlideOver=false;
            }
            operateWidth.value = reduce
        }
        /** 处理手指松开事件 */
        function handleTouchend(event:any) {
            touchEl=null
            console.log(`松开`)
            if(touchSlideOver){
                console.log(`滑动完成`)
                props.dragBtnStyle.action(props.serverData).then(()=>{
                    if(props.isReset){
                        // 需要返回起点
                        operateWidth.value=0;
                    }
                })
            }else{
                operateWidth.value=0;
            }
        }
         /** 处理手指触摸开始事件 */
        function handleTouchstart(event:any,elId:string) {
            const { pageX } = event.touches[0];
            uni.createSelectorQuery()
            .in(that)
            .select(`#${elId}`)
            .boundingClientRect((data:any) => {
                touchEl = {
                    xy:data,
                    startX:pageX
                }
                console.log(touchEl)
            }).exec();
            touchSlideOver=false;
            console.log(`被按下`)
            console.log(event)
        }

        return {
            myUserInfo,
            operateWidth,
            goToPage,
            handleTouchmove,
            handleTouchend,
            handleTouchstart,
            openPopup,
        }
    }
}


